<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="用户信息" width="50%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='is_central'" label="" prop="is_central">
              <el-select :disabled="true" v-model="formParams.is_central" placeholder="请选择所属平台" style="width: 40%">
                <el-option label="中控" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='role_id'" label="" prop="role_id">
              <el-select v-model="formParams.role_id" placeholder="请选择角色" clearable filterable style="width: 50%">
                <el-option :label="item.role_name" :value="item.id" v-for="(item, index) in roleData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='can_see_agent_ids' && formParams.agent_id == 0 && formParams.role != 3" label="" prop="can_see_agent_ids" style="height:auto;padding-bottom:5px">
              <el-select class="width100" v-model="formParams.can_see_agent_ids" placeholder="请选择渠道" filterable multiple >
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='nick_name'" label="" prop="nick_name">
              <el-input class="width40" type="text" v-model="formParams.nick_name" clearable placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='remark'" label="" prop="remark">
              <el-input type="text" v-model="formParams.remark" clearable placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='user_name'" label="" prop="user_name">
              <el-input class="width40" type="text" v-model="formParams.user_name" clearable placeholder="请输入账号" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='password'" label="" prop="password">
              <el-input class="width40" type="password" v-model="formParams.password" clearable placeholder="请输入账号密码" auto-complete="new-password"></el-input>
              <span class="encryption" v-if="formParams.id">
                当前密码已经过后台加密，如需修改，可直接修改
              </span>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='is_agent'" label="" prop="is_agent">
              <el-radio-group :disabled="data && data.id && data.is_agent?true:false" v-model="formParams.is_agent">
                <el-radio-button :label="1">渠道账号</el-radio-button>
                <el-radio-button :label="0">普通账号</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='is_open_google_check'" label="" prop="is_open_google_check">
              <el-radio-group :disabled="!formParams.user_name" v-model="formParams.is_open_google_check" @input="chooseGoogle">
                <el-radio-button :label="1">开启验证码</el-radio-button>
                <el-radio-button :label="0">关闭</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='google_url' && formParams.is_open_google_check" label="" prop="google_url" style="height:auto">
              <vue-qr :text="formParams.google_url" colorDark="#000" :size="150" />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='google_secret' && formParams.is_open_google_check" label="" prop="google_secret">
              <el-input class="width40" type="text" v-model="formParams.google_secret" disabled />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import VueQr from 'vue-qr'
import {
  addUser,
  editUser,
  googleKey
} from '@/api/user'

export default {
  components: {
    VueQr
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    roleData:{
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '用户角色', key: 'role_id',pass:true },
        { label: '用户昵称', key: 'nick_name',pass:true },
        { label: '可查看渠道', key: 'can_see_agent_ids' },
        { label: '备注', key: 'remark' },
        { label: '账号', key: 'user_name' ,pass:true},
        { label: '账号密码', key: 'password' ,pass:true},
        { label: '是否是渠道', key: 'is_agent' },
        { label: '谷歌验证码', key: 'is_open_google_check' },
        { label: '验证码', key: 'google_url' },
        { label: '谷歌秘钥', key: 'google_secret' },
      ],
      userInfo:this.$store.getters.userInfo,
      channelData: this.$store.state.commonState.channelDataArray,
      formParams: {
        nick_name: '',
        user_name: '',
        password: '',
        is_open_google_check: 0,
        google_secret: '',
        google_url: '',
        remark: '',
        role_id: '',
        can_see_agent_ids:[],
        is_agent:0,
        role:2
      },
      ruleForm: {
        role_id: [{ required: true, trigger: 'blur', message: '请选择用户角色', }],
        nick_name: [{ required: true, trigger: 'blur', message: '请输入用户昵称', }],
        user_name: [{ required: true, trigger: 'blur', message: '请输入用户账号', }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码', }],
        role_id: [{ required: true, trigger: 'blur', message: '请选择角色', }],
      },
    }
  },
  computed: {},
  activated(){
    this.userInfo=this.$store.getters.userInfo
    this.channelData=this.$store.state.commonState.channelDataArray
  },
  watch: {
    show: function () {
      let that = this,ids=[];
      that.isShow = that.show
      that.chooseLangDataList = []
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        if(that.formParams.can_see_agent_ids){
          ids=that.formParams.can_see_agent_ids.split(',')
          that.formParams.can_see_agent_ids=[]
          ids.map(id=>{
            that.formParams.can_see_agent_ids.push(Number(id))
          })
        }
      } else {
        that.formParams = {
          nick_name: '',
          user_name: '',
          password: '',
          is_open_google_check: 0,
          google_secret: '',
          google_url: '',
          remark: '',
          role_id: '',
          can_see_agent_ids:[],
          is_agent:0,
          role:2
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 是否开启谷歌验证码
    chooseGoogle (val) {
      let that = this;
      if (val) {
        if (!that.formParams.user_name) {
          that.formParams.is_open_google_check = 0
          return that.$message.error('请输入用户账号!')
        }
        googleKey({
          user_name: that.formParams.user_name
        }).then(function (res) {
          if (res.code == 1) {
            that.formParams.google_url = res.data.googleUrl
            that.formParams.google_secret = res.data.secret
          }
        }).catch((error) => {
          that.$message.error(error.msg)
        })
      }
    },
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      params.role_id=JSON.stringify(params.role_id)
      // 是否是渠道 且 登录用户是运营商 才能创建渠道
      if(params.is_agent && !that.userInfo.is_agent){
        params.role=0
      }else if(!params.is_agent && !that.userInfo.is_agent){
        params.role=2
      }else{
        params.role=3
      }
      params.can_see_agent_ids=params.can_see_agent_ids.toString(',')
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          // 新增
          if (!params.id) {
            addUser(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editUser(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.encryption {
  height: 10px;
  line-height: 10px;
  margin-bottom: -10px;
  font-size: 12px;
  color: darkred;
}
</style>
